<template>
  <n-layout class="n-layout-body">
    <n-layout-header :inverted="inverted" bordered>
      <div class="n-layout-header-left">
        <img src="" alt="">
        <span>{{ webTitle }}</span>
      </div>
      <div class="n-layout-header-right">
        <n-dropdown :options="headerMenu" @select="handleSelect">
          <n-avatar color="#06f" :size="48">root</n-avatar>
        </n-dropdown>
      </div>
    </n-layout-header>

    <n-layout class="n-layout-con" has-sider>
      <n-layout-sider bordered show-trigger collapse-mode="width" :collapsed-width="64" :width="240"
        :native-scrollbar="false" :inverted="inverted">
        <n-menu default-value="work" :inverted="inverted" :collapsed-width="64" :collapsed-icon-size="22"
          :options="menuOptions" />
      </n-layout-sider>

      <n-layout-content content-style="padding: 20px;">
        <router-view></router-view>
      </n-layout-content>
    </n-layout>

    <n-layout-footer :inverted="inverted" :bordered="false">
      系统
    </n-layout-footer>
  </n-layout>
</template>

<script setup>
import { nextTick, ref } from "vue"
import { mainData } from "@/stores/index.js"
import { storeToRefs } from "pinia"
import { menuOptions, headerMenu } from "@/config/js/NaiveUIMenu.js"
import router from "@/router"
import useAxios from "@/config/js/AxiosConfig"

let axios = useAxios()

// 变量区域
let inverted = ref(false)
let piniaData = mainData()

let { webTitle, ifUserAuthority } = storeToRefs(piniaData)

function handleSelect(key) {
  if (key === "logout") {
    ifUserAuthority.value = false
    axios.get("/users/logout")
      .then(res => {
        console.log(res)
        if (res.code === 200) {
          alert(res.message)
          router.push("/login")
          nextTick()
        }
      })
      .catch(err => {
        console.error(err);
      })
  } else if (key === "profile") {

  }
}
</script>

<style scoped>
@import url("@/styles/ViewCss/MainView.css");
</style>